<script setup lang="ts">
/**
 * 自定义微粒贷选择器
 *
 */

import {ref, defineProps, defineEmits} from 'vue';

type ColumnBean = { key: string }

const props: any = defineProps({
  columns: Array<ColumnBean>
  ,
  title: String
  ,
  description: String
  ,
  showWindow: {
    type: Boolean,
    default: false
  }
  ,
  value: String

})

/** 标记当前选择的索引值 */
const currentIndex = ref(0);

/** 定义一个用于更新 外部 v-model 的事件 */
const emit = defineEmits(['update:value', 'update:showWindow'])


/**
 * 选择
 * @param selectedValues
 */
const onClickSelect = (selectedValues: number) => {
  currentIndex.value = selectedValues
  // 发射更新事件，更新 v-model 绑定的值
  emit('update:value', props.columns[selectedValues].value)

  onClose()
};

/**
 * 关闭弹窗
 */
const onClose = () => {
  emit('update:showWindow', false)
}


</script>

<template>
  <!-- 自定义弹窗 -->
  <!-- vue3 注意点：应该将 v-model:show 替换为 :show 和 @update:show  -->
  <van-popup :show="showWindow" position="bottom" @close="onClose"
             style="border-top-left-radius: 10px;border-top-right-radius: 10px">
    <div class="div-picker-time">
      <div class="div-picker-time-header">
        <p style="font-weight: bold">{{ title }}</p>
        <p style="color: #999;font-size: 12px;padding-top: 5px">{{ description }}</p>
      </div>
      <p :key="index" class="p-list-title" v-for="(item,index) in columns" :class="{'selected':currentIndex===index}"
         @click="onClickSelect(index)">{{ item.key }}
      </p>
    </div>
  </van-popup>

</template>

<style scoped>

.div-picker-time {
  display: flex;
  flex-direction: column;
  position: relative;
  padding-bottom: 30px;

  .p-list-title {
    display: inline-block;
    padding: 20px 20px;
    font-weight: bold;
    border-bottom: 1px solid #eee;
  }

  .p-list-title.selected::after {
    content: '✓';
    position: absolute; /* 绝对定位，相对于其最近的已定位祖先（在这里是 .van-picker-column__item） */
    right: 30px;
    color: #FFD243;
  }

  .div-picker-time-header {
    padding-top: 30px;
    padding-bottom: 10px;
    padding-left: 15px;
  }
}
</style>
